<template>
	<!--  本页面是展示 商品列表，表格展示，带鼠标悬浮效果，头部和底部，都用公共的  -->
	<div>
		<newHeader v-on:titleChanged="updateTitle"/>

		<el-main>

			<div style="background: #EEEEEE;margin: 30px;padding-top: 60px;padding-bottom: 60px;">
				<div style="width: 1000px;margin: 0 auto;">
					<!--  中心标题区  -->
					<div style="text-align: center;">
						<span style="font-size: 18px;font-weight: bold; color: #333333;vertical-align: top;">{{titleName}}</span>
						<br />
						<span style="font-size: 12px;color: #bababa;vertical-align: top;">jingxuan</span>
					</div>
					<!--  内容列表展示区  -->

					<el-card shadow="hover" class="commonCard">
						<el-image
						      style="width: 100%; height: 300px;"
						      :src="url"
						      fit="cover"></el-image>
						<p style="text-align: center;">
							<span class="productName" >男女衬衫</span> 
							<span class="productPrice" >$32</span> 
							<span class="productNum" >30人</span>
						</p>
					</el-card>
					<el-card shadow="hover" class="commonCard">
						<el-image
						      style="width: 100%; height: 300px;"
						      :src="url"
						      fit="cover"></el-image>
						<p style="text-align: center;">
							<span class="productName" >男女衬衫</span> 
							<span class="productPrice" >$32</span> 
							<span class="productNum" >30人</span>
						</p>
					</el-card>
					<el-card shadow="hover" class="commonCard">
						<el-image
						      style="width: 100%; height: 300px;"
						      :src="url"
						      fit="cover"></el-image>
						<p style="text-align: center;">
							<span class="productName" >男女衬衫</span> 
							<span class="productPrice" >$32</span> 
							<span class="productNum" >30人</span>
						</p>
					</el-card>
					<el-card shadow="hover" class="commonCard">
						<el-image
						      style="width: 100%; height: 300px;"
						      :src="url"
						      fit="cover"></el-image>
						<p style="text-align: center;">
							<span class="productName" >男女衬衫</span> 
							<span class="productPrice" >$32</span> 
							<span class="productNum" >30人</span>
						</p>
					</el-card>
					<el-card shadow="hover" class="commonCard">
						<el-image
						      style="width: 100%; height: 300px;"
						      :src="url"
						      fit="cover"></el-image>
						<p style="text-align: center;">
							<span class="productName" >男女衬衫</span> 
							<span class="productPrice" >$32</span> 
							<span class="productNum" >30人</span>
						</p>
					</el-card>
					<el-card shadow="hover" class="commonCard">
						<el-image
						      style="width: 100%; height: 300px;"
						      :src="url"
						      fit="cover"></el-image>
						<p style="text-align: center;">
							<span class="productName" >男女衬衫</span> 
							<span class="productPrice" >$32</span> 
							<span class="productNum" >30人</span>
						</p>
					</el-card>
				</div>

			</div>

		</el-main>

		<newFooter />
	</div>
</template>

<script>
	// 导入其他模板示例
	import newHeader from '../home/newheader.vue'
	import newFooter from '../home/newFooter.vue'
	export default {
		name: 'jingxuan',
		components: {
			newHeader,
			newFooter
		},
		data() {
			return {
				url:'https://ccdn.goodq.top/caches/6cb70c11d7924995c4268c57fc3cb083/aHR0cHM6Ly81OGJmOTlmMWNlMjY5LnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMTAvNzg1NGI4OWZkNTM4MjliMGYxOTE3YzNjMjY4OTNiZTgtMjgweDI4MC05MC53ZWJw.webp',
				titleName:'精选第一张',
			}
		},
		methods: {
			updateTitle(e){   //声明这个函数
				console.log("收到header的事件:"+e)
				this.titleName = e;
			}
		}, 
		created() {
			console.log("页面实例创建时"+this.$route.query.name)
			//页面实例创建时
			this.titleName =this.$route.query.name;
		},
		beforeMount(){
			//页面实例挂载之前
			console.log("页面实例挂载之前"+this.$route.query.name)
			
		}, 
		updated(){
			//页面实例更新之后
			console.log("页面实例更新之后"+this.$route.query.name)
			
		},
		beforeDestroy(){
			//页面实例销毁之前
			console.log("页面实例销毁之前"+this.$route.query.name)
			
		},
	}
</script>

<style>
	.commonCard{
		display: inline-block;
		width: 32%;
		margin-right: 1%;
		margin-top: 10px;
		 background-color: #EEEEEE;
	}
	.commonCard .productName{
		display: inline-block;
		margin-left: 15px;
		font-size: 18px;
		color: #333333;
	}
	.commonCard .productPrice{
		display: inline-block;
		margin-left: 10px;
		font-size: 13px;
		color: #000000 !important;
	}
	.commonCard .productNum{
		display: inline-block;
		margin-left: 10px;
		font-size: 12px;
		color: #000000;
	}
</style>
